<template>
  <div class="course-bar-wrapper">
    <div class="course-bar-inner">
      <div class="course-bar">
        <div class="left">
          <div class="number">{{num}}</div>
          <div class="course-content">
            <h4 class="course-content-title" style="-webkit-box-orient: vertical;">{{data.title}}</h4>
            <p class="count" v-if="index == 0">
              <span class="small-text right-bar">{{duration.m}}分{{duration.s}}秒</span>
              <span class="divide-bar"></span>
              <span class="small-text">{{data.playCount}}人学过</span>
            </p>
          </div>
        </div>

        <div class="right" :class="index > 0 && 'icon-scale'" @click="play">
          <div>
            <span class="iconfont operator-icon" :class="icon"></span>
          </div>
          <!-- <p class="play-text" v-if="index === 0">已播放</p> -->
        </div>
      </div>
     </div>
    <div v-if="index > 0" class="course-panel" :style="outlineStyle">
      <ul class="out-wrapper">
        <li class="out-item" :class="!descItems.length && 'no-border'"><pre>{{data.description}}</pre></li>
        <li class="out-item" v-for="item,idx in descItems"  :class="idx === descItems.length -1 ? 'no-border' : ''" :key="idx"><pre>{{item}}</pre></li>
      </ul>
    </div>
    <audio :src="data.voiceUrl" v-if="index == 0" ref="audio"/>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: {}
    },
    index: {
      type: Number
    }
  },
  computed: {
    duration() {
      let m = Math.floor(this.data.voiceDuration / 60);
      let s = this.data.voiceDuration % 60;
      return { m, s };
    },
    num() {
      let number = this.index;
      let num = number < 10 ? "0" + number : number;
      return num;
    },
    icon() {
      if (this.index === 0) {
        if (this.visibleOutline) {
             return "icon-zanting";
        }
        return "icon-bofang";
      }
      if (this.visibleOutline) {
         return "icon-scale icon-fold icon-shouqi";
      }
      return "icon-scale icon-fold icon-zhankai";
    },
    outlineStyle() {
      return {
        opacity: this.visibleOutline ? 1 : 0,
        height: this.visibleOutline ? "auto" : 0
      }
    },
    descItems() {
      if (!this.data.descriptionItem) {
        return [];
      }
      return JSON.parse(this.data.descriptionItem);
    }
  },
  data() {
    return {
      visibleOutline: this.index === 1 || this.index === 2
    };
  },
  methods: {
    // setNumber(index) {
    //   let no = index + 1;
    //   if (no < 10) {
    //     return  "0" + no;
    //   }
    //   return no;
    // },
    play() {
      if (this.index === 0) {
        if (this.visibleOutline) {
           this.$refs.audio.pause();
        } else {
            this.$refs.audio.play();
        }
      }
      this.visibleOutline = !this.visibleOutline;
    }
  },
  mounted() {}
};
</script>

<style>
.course-bar-wrapper {
  padding: 0 .25rem;
  margin-bottom: .3rem;
  & .course-bar-inner {
      padding: 0 0.15rem;
     & > .course-bar {
    position: relative;
    z-index: 1;
    padding: 0 .2rem;
    display: flex;
    justify-content: space-between;
    /* padding: 0 0.2rem; */
    align-items: center;
    width: 100%;
    height: 1.5rem;
    font-size: 0.24rem;
    border-radius: 10px;
    color: #8a8f9e;
    background-color: #f8f9ff;
    & > .left {
      display: flex;
      align-items: center;
      & > .number {
        width: 0.5rem;
        height: 0.5rem;
        margin-right: 0.2rem;
        border-radius: 0.25rem;
        text-align: center;
        line-height: 0.5rem;
        font-size: 0.32rem;
        background-image: linear-gradient(120deg, #a8edff 0%, #55a7ff 100%);
        color: white;
      }
      & .course-content {
        flex: 1;
        & .course-content-title {
          max-width: 4.5rem;
          overflow:hidden; 
          text-overflow:ellipsis;
          display:-webkit-box; 
          -webkit-box-orient:vertical;
          -webkit-line-clamp:2; 
          font-size: 0.3rem;
        }
        & .count {
          display: flex;
          align-items: center;
          & .small-text {
            font-size: 0.24rem;
          }
          & .divide-bar {
            display: inline-block;
            width: 2px;
            height: 0.24rem;
            margin: 0 0.12rem;
            background-color: #8a8f9e;
          }
        }
      }
    }
        & >.icon-scale {
          transform: scale(0.6);
        }
    & > .right {
      width: 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
    
        & .operator-icon {
          font-size: 0.4rem;
        }

        & .icon-fold {
          font-size: .2rem;
          color: #a7acbd;
        }
      
      & .play-text {
        font-size: 0.24rem;
      }
    }
  }
  }
  & .course-panel {
    opacity: 0;
    margin-top: -.84rem;
    padding-top: 0.54rem;
    padding-bottom: .3rem;
    overflow: hidden;
    transition: all .5s ease-in-out;
      background-color: #e6eaf7;
      border-radius: 8px;
      & > .desc {
        padding: .3rem .4rem;
        padding-top: .6rem;
        font-size: .24rem;
        color: #7e8393;
        }
      & >.out-wrapper {
        padding: 0 .4rem;
        padding-top: .3rem;
        & >.out-item {
          display: flex;
          align-items: center;
          padding: .22rem 0;
          font-size: .28rem;
          border-bottom: solid 1px white;
	        color: #7e8393;
          & > pre {
            font-family: PingFang-SC-Regular;
            white-space: pre-wrap;
            font-size: .28rem;
            color: #7e8393;
          }
        }
       & > .no-border {
           border-bottom: none;
       }
      }
    }
}
</style>
